@import '@/styles/color.less';
@import '@/styles/token.less';

// 内联重命名样式
.inlineRenameInput {
  flex: 1;
  margin-right: 8px;

  :global(.ant-input) {
    font-size: @fontSizeSm;
    padding: 2px 6px;
    height: 24px;
    border-radius: 4px;
  }
}

.renameMode {
  background: @colorPrimaryBg !important;
  border: 1px solid @colorPrimaryBorder;
  border-radius: 4px;
}

// 文件树列
.fileTreeCol {
  flex: 0 0 15%; // 默认占25%宽度
  height: 100%;
  min-width: 240px;
  background: @colorBgContainer;
  border-right: @lineWidth solid @colorBorderSecondary;
  padding: 0;
  // box-shadow: 2px 0 8px rgba(0, 0, 0, 5%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-x: auto; // 启用横向滚动

  &.collapsed {
    flex: 0 0 0 !important; // 折叠时不占宽度
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;

    .fileTreeCard {
      position: relative;

      :global(.ant-card-body) {
        display: none;
      }
    }

    .fileTreeHeader {
      display: none;
    }

    .fileTreeContainer {
      display: none;
    }
  }

  &:not(.collapsed) {
    .fileTreeContainer {
      animation: fade-in 0.3s ease-in-out;
    }
  }
}

.fileTreeCard {
  height: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  position: relative;

  :global(.ant-card-body) {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}

.fileTreeHeader {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 12px;
  background: @colorFillQuaternary;
  border-bottom: 1px solid @colorBorder;
  flex-shrink: 0;
  min-height: 36px;
  align-items: center;
}

.dataSourceTitle {
  font-size: @fontSize;
  font-weight: @fontWeightStrong;
  color: @colorTextBase;
}

.addButton {
  display: flex;
  align-items: center;
  color: @colorTextBase;
  height: 32px;
  width: 32px;
  border-radius: 4px;
  transition: all 0.2s ease;
  border: none;
  background: transparent;

  &:hover {
    color: @colorPrimary;
    background: @colorPrimaryBg;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.fileTreeContainer {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto; // 启用横向滚动
  padding: 8px;
  min-height: 0; // 允许 flex 子项收缩
}

// 文件树样式
.fileTree {
  // padding: 8px 0;
  min-width: max-content; // 确保内容不会被压缩
  width: 100%;
}

.folderItem {
  margin-bottom: 0;
}

.folderHeader {
  display: flex;
  align-items: center;
  padding: 4px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.2s ease;

  &:hover {
    background: rgba(0, 0, 0, 5%);

    // .folderIcon {
    //   transform: rotate(90deg);
    // }
  }
}

.folderIcon {
  margin-right: 4px;
  color: @colorTextBase;
  transition: transform 0.2s ease;

  &.expanded {
    transform: rotate(90deg);
  }
}

.folderName {
  color: @colorTextBase;
  font-weight: @fontWeightStrong;
  font-size: @fontSize;
  font-family: @fontFamilyCode;
}

.fileList {
  // margin-top: 4px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: slide-down 0.3s ease-out;
}

@keyframes slide-down {
  from {
    opacity: 0;
    max-height: 0;
  }

  to {
    opacity: 1;
    max-height: 1000px;
  }
}

.fileItem {
  display: flex;
  align-items: center;
  padding: 4px;
  cursor: pointer;
  border-radius: 4px;
  // margin-bottom: 2px;
  transition: all 0.2s ease;

  &:hover {
    background: rgba(0, 0, 0, 5%);

    .fileIcon {
      color: @colorPrimary;
    }
  }

  &.activeFile {
    background: @colorPrimaryBg;
    // border: 1px solid rgba(59, 130, 246, 30%);

    .fileIcon {
      color: @colorPrimary;
    }
  }
}

.fileIcon {
  margin-right: 8px;
  font-size: @fontSize;
  color: @colorTextBase;
  transition: color 0.2s ease;
}

.fileName {
  color: @colorTextBase;
  font-size: @fontSize;
  font-family: @fontFamilyCode;
  flex: 1;

  &.hiddenFile {
    color: @colorTextQuaternary;
    font-style: italic;
  }
}

.fileStatus {
  color: @colorTextBase;
  font-size: @fontSizeSm;
  background: rgba(0, 0, 0, 5%);
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px;
}

// 删除按钮样式
.deleteButton {
  opacity: 0;
  transition: opacity 0.2s ease;
  margin-left: auto;
  color: @colorTextBase;
  padding: 2px;
  height: 20px;
  width: 20px;
  min-width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    color: @colorError;
    background: @colorErrorBg;
  }

  .folderHeader:hover &,
  .fileItem:hover & {
    opacity: 1;
  }
}

// 折叠按钮样式 - 放在预览区域左下角
.collapseButton {
  position: absolute;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  // background: rgba(255, 255, 255, 95%);
  color: @colorTextBase;
  font-size: @fontSizeSm;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  cursor: pointer;
  outline: none;
  background: @colorBgContainer;
  border: none;

  // 展开状态 - 文件树可见时
  &.expanded {
    opacity: 0.8;
    left: 240px - 12px;
    color: @colorTextBase;

    &:hover {
      background: @colorBgContainer;
      opacity: 1;
    }
  }

  // 折叠状态 - 文件树隐藏时
  &.collapsed {
    opacity: 1;
    left: 16px;

    &:hover {
      background: @colorBgContainer;
      opacity: 1;
    }
  }

  &:focus {
    outline: none;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

// 数据资源相关样式
.dataSourceContainer {
  flex-shrink: 0; // 不允许收缩
  display: flex;
  flex-direction: column;
  background: @colorBgContainer;
  border-top: @lineWidth solid @colorBorderSecondary;
  // margin-top: 8px;
}

.dataSourceHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: @lineWidth solid @colorBorder;
  background: @colorBgContainer;
  // backdrop-filter: blur(10px);

  h3 {
    margin: 0;
    color: @colorTextBase;
    font-size: @fontSizeLg;
    font-weight: @fontWeightStrong;
  }
}

.dataSourceContent {
  flex: 1;
  overflow: hidden;
  background: @colorBgContainer;
}

// 数据资源列表样式
.dataResourceList {
  height: 200px; // 减少高度以适应底部固定布局

  // 自定义滚动条样式
  // &::-webkit-scrollbar {
  //   width: 6px;
  // }

  // &::-webkit-scrollbar-track {
  //   background: transparent;
  // }

  // &::-webkit-scrollbar-thumb {
  //   background: rgba(0, 0, 0, 20%);
  //   border-radius: 3px;

  //   &:hover {
  //     background: rgba(0, 0, 0, 30%);
  //   }
  // }

  // &::-webkit-scrollbar-corner {
  //   background: transparent;
  // }
}

// 资源项样式
.resourceItem {
  &:hover {
    .resourceActionButton {
      opacity: 1 !important;
    }
  }
}

// 资源操作按钮样式
.resourceActionButton {
  opacity: 0;
  transition: opacity 0.2s ease;
  color: @colorTextBase;

  &:hover {
    color: @colorPrimary;
    background: @colorPrimaryBg;
  }
}

// 数据资源类型标签样式
.resourceTypeTag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: @fontSizeSm;
  font-weight: @fontWeightStrong;
  background: @colorPrimaryBg;
  color: @colorPrimary;
  border: @lineWidth solid @colorPrimaryBorder;

  &.workflow {
    background: rgba(24, 144, 255, 10%);
    color: #1890ff;
    border-color: rgba(24, 144, 255, 20%);
  }

  &.plugin {
    background: rgba(82, 196, 26, 10%);
    color: #52c41a;
    border-color: rgba(82, 196, 26, 20%);
  }

  &.reverse-proxy {
    background: rgba(250, 140, 22, 10%);
    color: #fa8c16;
    border-color: rgba(250, 140, 22, 20%);
  }

  &.api {
    background: rgba(114, 46, 209, 10%);
    color: #722ed1;
    border-color: rgba(114, 46, 209, 20%);
  }

  &.database {
    background: rgba(19, 194, 194, 10%);
    color: #13c2c2;
    border-color: rgba(19, 194, 194, 20%);
  }

  &.file-storage {
    background: rgba(235, 47, 150, 10%);
    color: #eb2f96;
    border-color: rgba(235, 47, 150, 20%);
  }
}

// 数据资源状态标签样式
.resourceStatusTag {
  &.active {
    color: #52c41a;
    background: rgba(82, 196, 26, 10%);
    border-color: rgba(82, 196, 26, 20%);
  }

  &.inactive {
    color: #8c8c8c;
    background: rgba(140, 140, 140, 10%);
    border-color: rgba(140, 140, 140, 20%);
  }

  &.error {
    color: #ff4d4f;
    background: rgba(255, 77, 79, 10%);
    border-color: rgba(255, 77, 79, 20%);
  }

  &.configuring {
    color: #1890ff;
    background: rgba(24, 144, 255, 10%);
    border-color: rgba(24, 144, 255, 20%);
  }
}

// 数据资源空状态样式
.dataResourceEmpty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: @colorTextQuaternary;
  text-align: center;

  .emptyIcon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
  }

  .emptyText {
    font-size: @fontSize;
    margin-bottom: 8px;
  }

  .emptyDescription {
    font-size: @fontSizeSm;
    color: @colorTextQuaternary;
  }
}

// 响应式设计
// @media (max-width: 1200px) {
//   .fileTreeCol {
//     flex: 0 0 25%;
//     max-width: 25%;
//     min-width: 240px;
//   }
// }

// @media (max-width: 768px) {
//   .fileTreeCol {
//     height: 200px;
//     flex: 0 0 200px; // 固定高度
//     min-width: 0;
//     border-right: none;
//     border-bottom: 1px solid rgba(0, 0, 0, 10%);
//   }

//   .dataSourceHeader {
//     padding: 8px 12px;
//     flex-direction: column;
//     align-items: flex-start;
//     gap: 8px;

//     h3 {
//       font-size: 14px;
//     }
//   }

//   .dataSourceContent {
//     padding: 0 8px;
//   }

//   .dataResourceList {
//     :global(.ant-list-item) {
//       padding: 8px 12px;
//     }

//     :global(.ant-list-item-meta-avatar) {
//       margin-right: 8px;
//     }
//   }
// }

// 暗色主题支持
[data-theme='dark'] {
  .addButton {
    color: @colorTextBase;

    &:hover {
      color: @colorPrimary;
      background: @colorPrimaryBg;
    }

    &:disabled {
      opacity: 0.5;
      color: @colorTextTertiary;
    }
  }

  .dataSourceHeader {
    .addButton {
      color: @colorTextBase;

      &:hover {
        color: @colorPrimary;
        background: @colorPrimaryBg;
      }

      &:disabled {
        opacity: 0.5;
        color: @colorTextTertiary;
      }
    }
  }
}
